<template>
  <div>

    <h1>Hello world~ Element UI</h1>
    <hr/>
    <el-row>
      <el-col :offset="1" :span="10">
        <div class="bianjiqi">
          <!--:popper-append-to-body="false"-->
          <el-autocomplete
            class="inline-input"
            :value="pre_input"
            v-model="input"
            placeholder="请输入语句"
            :fetch-suggestions="querySearch"
            :trigger-on-focus="false"
            :highlight-first-item="true"
            @select="handleSelect"
            @change.native="handleChange"
          ></el-autocomplete>
          <br><br><br>
          <!--            <el-input type="textarea"-->
          <!--                      v-model="input"-->
          <!--                      placeholder="请输入语句"-->
          <!--                      :clearable="true"-->
          <!--                      :rows="10"-->
          <!--                      @input="handleChange"-->
          <!--            ></el-input>-->

        </div>
      </el-col>
      <el-col :offset="2" :span="10">
        <div class="tiaoshiqi"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "Home",
    data() {
      return {
        pre_input: '',
        input: '',
        cihuiku: [{'value': '如果  就'},
          {'value': '查找'},
          {'value': '查看'},
          {'value': '小明明'},
          {'value': '明明'},
          {'value': '小明'},
          {'value': '明'},
          {'value': '明白'}]
      }
    },
    methods: {
      querySearch(queryString, callback) {
        this.pre_input=queryString;
        let result = this.cihuiku.filter((cihui) => {
          let word1 = queryString.substring(queryString.length - 1);
          let word2 = queryString.substring(queryString.length - 2);
          let word3 = queryString.substring(queryString.length - 3);
          let res1 = cihui.value.startsWith(word1);
          let res2 = cihui.value.startsWith(word2);
          let res3 = cihui.value.startsWith(word3);
          return res1 || res2 || res3;
        });
        console.log("result==" + result);
        callback(result);
      },
      handleSelect(item) {
        //获取原来的输入值
        console.log("pre=="+this.pre_input);;

        let queryString = this.pre_input;
        console.log("item="+item.value);
        console.log("item="+this.input);
        console.log("queryString="+queryString);
        let pre_match_num1 = queryString.substring(queryString.length-1);
        let pre_match_num2 = queryString.substring(queryString.length-2);

        console.log("pre_match_num1="+pre_match_num1);
        console.log("pre_match_num2="+pre_match_num2);
        //console.log("num2=="+item.indexOf(pre_match_num2));
        //console.log("num1=="+item.indexOf(pre_match_num1));
        console.log("test1=="+this.input.indexOf(pre_match_num1));
        console.log("test2=="+this.input.indexOf(pre_match_num2));
        console.log("-2=="+this.pre_input.substring(0, this.pre_input.length - 2));
        if (this.input.indexOf(pre_match_num2)!=-1) {
          this.input = this.pre_input.substring(0,this.pre_input.length-2) + item.value;
        }else if(this.input.indexOf(pre_match_num1)!=-1){
          this.input = this.pre_input.substring(0,this.pre_input.length-1) + item.value;
        }
      },
      handleChange(){
        console.log("handleChange");
        //this.pre_input=this.input;
      }
    }
  }
</script>

<style scoped>
  .bianjiqi {
    height: 500px;
    background-color: lightcyan;
    padding: 10px;
  }

  .tiaoshiqi {
    height: 500px;
    background-color: lightgoldenrodyellow;
    padding: 10px;
  }

  .inline-input {
    width: 100%;
  }


</style>
